<script setup>
import router from '@/router'
import CompanyPanel from '@/views/Home/components/CompanyPanel.vue'
import { reactive, ref } from 'vue'
const total = ref(50)
// 岗位分页基本属性
const Company_tablePage = reactive({
  catename: '机器学习',
  pageNum: 1,
  pageSize: 9
})
// 分页公司数据
// const CompanyList = ref([])

// 分类数据
const catelist = ref([
  {
    id: 1,
    name: '分类1'
  },
  {
    id: 2,
    name: '分类2'
  },
  {
    id: 3,
    name: '分类3'
  },
  {
    id: 4,
    name: '分类4'
  }
])

// 分类所属id
// const parentId = ref(1)

// 当前分类名
const resentCateName = ref()

const handlePageChange = (currentPage) => {
  Company_tablePage.pageNum = currentPage
  console.log(currentPage)
}

const TruntoCompanyInfo = () => {
  router.push('/CompanyInfo')
}
</script>

<template>
  <el-container>
    <el-header>
      <el-tabs v-model="resentCateName" @tab-change="tab_change">
        <el-tab-pane
          v-for="cate in catelist"
          :key="cate.id"
          :name="cate.name"
          :label="cate.name"
        >
        </el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main>
      <!-- <el-row
        :gutter="10"
        v-for="index in Math.ceil(CompanyList.length / 4)"
        :key="index"
      > -->
      <el-row :gutter="10" v-for="index in 3" :key="index">
        <el-col :span="6" v-for="i in 4" :key="i">
          <!-- <CompanyPanel
            :logo="item.logo"
            :name="item.name"
            :Hot_job="item.Hot_job"
            :Type="item.Type"
          /> -->
          <CompanyPanel
            logo="#"
            name="华为"
            Hot_job="算法工程师"
            Type="计算机"
            @click="TruntoCompanyInfo"
          />
        </el-col>
      </el-row>
      <el-row class="page">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="Company_tablePage.pageNum"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.el-header {
  text-align: center;
}
.el-header span {
  font-weight: 700;
  font-size: 30px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 10px;
}

.grid-content {
  width: 384px;
  height: 136px;
  border-radius: 4px;
  min-height: 36px;
  background-color: gray;
}
.page {
  justify-content: center;
}

.joblist-header-nav {
  width: 600px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 40px;
    width: auto;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }

    .active {
      color: $xtxColor;
      border-bottom: 1px solid $xtxColor;
    }
  }
}
</style>
